<template>
	<view class="NoData-common">
		<image class="no-data-icon" :src="iconSrc" mode="aspectFill"></image>
		<text class="no-data-text">{{ message }}</text>
		<view v-if="isToPageButton" class="add-data-btn" @click="goToDataPage">{{addDataText}}</view>
	</view>
</template>

<script setup>
	// 接收父组件传递的 props，用于自定义消息和图标
	import { watchEffect	} from 'vue';
	// 接收父组件传递的 props
	const props = defineProps({
		message: {
			type: String,
			default: '暂无数据'
		},
		iconSrc: {
			type: String,
			default: 'https://file.whshiyuan.cn:9000/toopu/origin/7171737014949.png'
		},
		addDataText: {
			type: String,
			default: '添加数据'
		},
		toPageUrl: {
			type: String,
			default: '/pages/home/index'
		},
		isToPageButton: {
			type: Boolean,
			default: true // 默认显示按钮
		}
	});

	// 在 watchEffect 中正确引用 props
	watchEffect(() => {
		console.log('父组件传过来的样式数据 nodata:', props);
	});

	// 点击按钮后跳转到指定的添加数据页面
	const goToDataPage = () => {
		uni.navigateTo({
			url: props.toPageUrl
		});
	};
</script>

<style lang="scss" scoped>
	.NoData-common {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: -200rpx;

		.no-data-icon {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}

		.no-data-text {
			font-size: 28rpx;
			color: #888;
			text-align: center;
			margin: 30rpx 0;
		}

		.add-data-btn {
			border-bottom: 2rpx solid #007aff;
			color: #007aff;
			padding: 10rpx 20rpx;
			font-size: 28rpx;
		}
	}
</style>